<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <br />

    <span>
      搜索：
      <el-input style="width:15rem" placeholder="商品名" @input="search" v-model="search_name"></el-input>
    </span>
    <el-select
      style="width:15rem"
      placeholder="商品类型"
      v-model="type"
      autocomplete="off"
      @change="search"
      clearable
    >
      <el-option
        v-for="item in type_options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-button type="primary" icon="el-icon-search"></el-button>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="4" v-for="item in goods" :key="item.title">
        <div>
          <el-card class="goods-card" :body-style="{ padding: '0px' }">
            <img :src="item.remark" class="small-img" @click="detail(item)" />
            <div class="goods-info-div">
              <div class="goods-row">
                <span>{{item.title}}</span>
                <div class="small-icon" @click="star(item)">
                  <i :class="item.star == 1 ? 'el-icon-star-on' :'el-icon-star-off'"></i>
                </div>
              </div>
              <div class="goods-row">
                <el-link :underline="false" type="primary">¥ {{item.retail_price}}</el-link>
                <el-button type="text" class="btn" @click="detail(item)">详情</el-button>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <el-drawer title="drawer" :visible.sync="drawer" size="50%" :with-header="false">
      <div class="goods-div">
        <h2>{{chooseItem.title}}</h2>
        <div class="icon" @click="star(chooseItem)">
          <i :class="chooseItem.star == 1 ? 'el-icon-star-on' :'el-icon-star-off'"></i>
        </div>
        <div class="base-info">
          <img :src="chooseItem.remark" class="img" />
          <div style="width:25rem">
            <p>{{chooseItem.title}}</p>
            <el-link :underline="false" type="primary">{{chooseItem.retail_price}} ¥</el-link>
            <p>品牌: {{chooseItem.name_en}}</p>
            <p>库存: {{chooseItem.replenishment_period}}</p>
            <el-popover placement="bottom" v-model="dialogVisible">
              <div class="check">
                <el-checkbox
                  :indeterminate="isIndeterminate"
                  v-model="checkAll"
                  @change="handleCheckAllChange"
                >Amazon</el-checkbox>

                <el-checkbox-group v-model="checkedAStores" @change="handleCheckedAStoresChange">
                  <el-checkbox
                    class="store"
                    v-for="item in Astores"
                    :label="item"
                    :key="item"
                  >{{item}}</el-checkbox>
                </el-checkbox-group>

                <el-checkbox
                  class="title"
                  :indeterminate="EisIndeterminate"
                  v-model="EcheckAll"
                  @change="EhandleCheckAllChange"
                >Ebay</el-checkbox>

                <el-checkbox-group v-model="checkedEStores" @change="handleCheckedEStoresChange">
                  <el-checkbox
                    class="store"
                    v-for="item in Estores"
                    :label="item"
                    :key="item"
                  >{{item}}</el-checkbox>
                </el-checkbox-group>
              </div>
              <div class="minibtn">
                <el-button size="mini" @click="dialogVisible = false">取消</el-button>
                <el-button size="mini" type="primary" plain @click="pushShip">推送</el-button>
              </div>
              <el-button type="primary" slot="reference">立即直发</el-button>
            </el-popover>
            <el-button
              type="primary"
              @click="star(chooseItem)"
            >{{chooseItem.star == 1 ? '从心愿单移除' : '加入心愿单'}}</el-button>
          </div>
        </div>
        <br />
        <el-tabs v-model="activeName" class="tab">
          <el-tab-pane label="Amazon的描述" name="first">
            <article v-html="compileMarkDown(chooseItem.amazon_description)" ></article>
          </el-tab-pane>
          <el-tab-pane label="ebay的描述" name="second">
            <article v-html="compileMarkDown(chooseItem.ebay_description)" ></article>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import showdown from 'showdown'
var converter = new showdown.Converter();
export default {
  data() {
    return {
      checkAll: false,
      EcheckAll: false,
      checkedAStores: [],
      checkedEStores: [],
      Astores: [],
      Estores: [],
      isIndeterminate: true,
      EisIndeterminate: true,
      //
      dialogVisible: false,
      activeName: "first",
      chooseItem: {},
      drawer: false,
      type_options: [
        { value: "Phone", label: "手机" },
        { value: "Computer", label: "电脑" },
        { value: "Instrument", label: "仪器" },
        { value: "Appliances", label: "器具" }
      ],
      search_name: "",
      type: "",
      goods: [],
      table: [],
      wishlist: []
    };
  },
  mounted() {
    if(sessionStorage.getItem("user_id") != 3){
      this.$post("/str/getStoreByUserID", {
      user_id: sessionStorage.getItem("user_id")
    }).then(res => {
      if (res.code == 504) {
        this.$message.warning(res.message);
        return;
      }
      if (res.code == 200) {
        this.Astores = res.data
          .filter(e => e.plataeform_type == 1)
          .map(e => e.store_name);
        this.Estores = res.data
          .filter(e => e.plataeform_type == 2)
          .map(e => e.store_name);
      }
    });
    }

    this.$post("/product/getProductOnShelf", {
      user_id: sessionStorage.getItem("user_id")
    }).then(res => {
      if (res.code == 504) {
        this.$notify.warning(res.message);
        return;
      }
      if (res.code == 200) {
        this.goods = res.data;
        this.table = res.data;
      }
    });
  },
  methods: {
    compileMarkDown(value) {
      return converter.makeHtml(value)
    },
    refresh() {
      this.$post("/product/getProductOnShelf", {
        user_id: sessionStorage.getItem("user_id")
      }).then(res => {
        if (res.code == 504) {
          this.$notify.warning(res.message);
          return;
        }
        if (res.code == 200) {
          this.goods = res.data;
          this.table = res.data;
        }
      });
    },
    EhandleCheckAllChange(val) {
      this.checkedEStores = val ? this.Estores : [];
      this.EisIndeterminate = false;
    },
    handleCheckAllChange(val) {
      this.checkedAStores = val ? this.Astores : [];
      this.isIndeterminate = false;
    },
    handleCheckedEStoresChange(value) {
      let checkedCount = value.length;
      this.EcheckAll = checkedCount === this.Estores.length;
      this.EisIndeterminate =
        checkedCount > 0 && checkedCount < this.Estores.length;
    },
    handleCheckedAStoresChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.Astores.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.Astores.length;
    },
    pushShip() {
      this.dialogVisible = false;
      this.$notify.success("成功！");
    },
    //添加到心愿单，记得调refresh()刷新一下
    async getWishList() {
      await this.$post("/wit/getWishlist", {
        user_id: sessionStorage.getItem("user_id")
      }).then(res => {
        let temp = [];
        for (var i = 0; i < res.data.number; i++) {
          temp.push({
            name: res.data.product[i].title,
            src: res.data.product[i].remark,
            price: res.data.product[i].retail_price,
            brand: res.data.brand[i].name_en,
            stock: res.data.product[i].replenishment_period,
            amazondescription: res.data.packageinfo[i].amazon_description,
            ebaydescription: res.data.packageinfo[i].ebay_description,
            witid: res.data.wishlist[i].wit_id,
            star: 1,
            proid: res.data.product[i].pro_id
          });
        }
        this.wishlist = temp;
      });
    },
    star(item) {
      this.getWishList().then(r => {
        var witid;
        for (var i = 0; i < this.wishlist.length; i++) {
          if (item.pro_id == this.wishlist[i].proid) {
            witid = this.wishlist[i].witid;
          }
        }
        if (item.star == 1) {
          this.$post("/wit/deletedWishlist", {
            wit_id: witid
          }).then(res => {
            item.star = 2;
            this.refresh();
          });
          return;
        } else {
          this.$post("/wit/addWishlist", {
            user_id: sessionStorage.getItem("user_id"),
            pro_id: item.pro_id
          }).then(res => {
            item.star = 1;
            this.refresh();
          });
        }
      });
    },
    detail(item) {
      this.chooseItem = item;
      this.drawer = true;
    },
    search() {
      this.goods = this.table.filter(
        e => e.title.match(this.search_name) && e.key_words.match(this.type)
      );
    }
  }
};
</script>

<style scoped>
.minibtn {
  margin-top: 1rem;
}
.check >>> .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #1598ec;
  border-color: #1598ec;
}
.check >>> .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #1598ec;
  border-color: #1598ec;
}
.check >>> .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #1598ec;
}
.title {
  margin-top: 0.5rem;
}
.store {
  display: block;
  margin-left: 1rem;
  margin-top: 0.5rem;
}
.tab {
  width: 50rem;
}
.tab >>> .el-tabs__item.is-active {
  color: #1598ec;
}
.tab >>> .el-tabs__active-bar {
  background-color: #1598ec;
}
.base-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.goods-div {
  margin-left: 3rem;
  height: 60rem;
}
.small-icon {
  font-size: 20px;
  color: #f3c93f;
}
.icon {
  position: absolute;
  top: 1rem;
  left: 11rem;
  font-size: 30px;
  color: #f3c93f;
}
.goods-row {
  width: 94%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.goods-info-div {
  margin-top: 0.5rem;
  margin-left: 1rem;
}
.small-img {
  width: 100%;
  height: 15rem;
}
.img {
  width: 20rem;
  height: 20rem;
}
.goods-card {
  margin-top: 0.8rem;
  width: 15rem;
  height: 20rem;
}
</style>
